import React from 'react';
import { Box, Grid, Typography, Button, GlobalStyles } from '@mui/material';
import { Tablet, PhoneAndroid } from '@mui/icons-material';
import { useQuery } from 'react-query';
import { Plans } from 'api/queries';
import { useDarkMode } from 'contexts/DarkMode';
import { useTranslation } from 'react-i18next';
import AdaptiveLayout from 'components/elements/AdaptiveLayout';
import ReferralActionButtons from 'components/ecosystems/ReferralActionButtons';
import SliderInfo from 'components/electrons/SliderInfo';
import PlanCard from './PlanCard'; // Import our new PlanCard component
import Loader from 'components/atoms/Loader';
import { styled } from '@mui/material/styles';
import storeButtonsImage from 'images/store-btns-white.png';

// Business-themed CTA section styling
const CtaContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(4, 2),
  textAlign: 'center',
  backgroundColor: '#f8fafc',
  borderRadius: '8px',
  margin: '16px auto 24px',
  maxWidth: '600px',
}));

const CtaTitle = styled(Typography)(({ theme }) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '1.5rem',
  fontWeight: '600',
  color: '#2d3748',
  marginBottom: theme.spacing(2),
}));

const CtaDescription = styled(Typography)(({ theme }) => ({
  fontSize: '1rem',
  color: '#718096',
  marginBottom: theme.spacing(3),
}));

const CtaButton = styled(Button)(({ theme }) => ({
  backgroundColor: '#0fa0af',
  color: 'white',
  textTransform: 'none',
  padding: '10px 24px',
  fontSize: '0.95rem',
  fontWeight: 500,
  borderRadius: '8px',
  boxShadow: 'none',
  '&:hover': {
    backgroundColor: '#0d8e9c',
    boxShadow: 'none',
  }
}));

// Global styles for store buttons
const storeButtonStyles = (
  <GlobalStyles
    styles={{
      '.btn-store': {
        display: 'inline-block',
        height: '50px',
        backgroundImage: `url(${storeButtonsImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '315px 50px', // Original dimensions
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        margin: '0 5px',
        '&:hover': {
          boxShadow: '0 0 10px #fff',
        }
      },
      '.btn-store-ios': {
        width: '150px', // Based on your original -150px offset
        backgroundPosition: '0 0', // Apple on the left
      },
      '.btn-store-android': {
        width: '165px', // Remaining width (315-150=165)
        backgroundPosition: '-150px 0', // Google Play positioned at -150px
      },
      '.group-inline': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '10px',
        marginBottom: '16px',
      }
    }}
  />
);

const HomePage = () => {
  const { darkMode } = useDarkMode();
  const { t } = useTranslation();
  
  // Plans query to get the plan data
  const plansQuery = useQuery(
    "Plans",
    Plans,
    { retry: false }
  );
  
  // Prepare plan cards based on query data - filter for monthly plans only
  let monthlyPlans = [];
  
  if (plansQuery.data?.data?.plans) {
    monthlyPlans = plansQuery.data.data.plans.filter(p => p.monthly);
  }
  
  return (
    <Box sx={{ width: '100%' }}>
      {storeButtonStyles}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={false}
      >
        <Typography variant="h4" sx={{ textAlign: 'center', fontWeight: 'bold', mb: 2 }}>
          Premium FSBO Leads for Agents
        </Typography>
        
        <ReferralActionButtons 
          referralLink="premierproperties4you.com"
          showLeaderTextAlways={true}
          fontSize="1.1rem"
          buttonSize="1rem"
          color="primary.main"
        />
      </AdaptiveLayout>
      
      {/* Store buttons section */}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={2}
        paddingY={3}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <div className="group-inline">
          <a href="https://apps.apple.com/us/app/your-app/id123456789" target="_blank" rel="noopener noreferrer">
            <div className="btn-store btn-store-ios"></div>
          </a>
          <a href="https://play.google.com/store/apps/details?id=com.yourapp.android" target="_blank" rel="noopener noreferrer">
            <div className="btn-store btn-store-android"></div>
          </a>
        </div>
        <Typography sx={{ color: '#718096', fontSize: '0.95rem', textAlign: 'center' }}>
          Available for <Tablet sx={{ mx: 0.5, fontSize: '1.2rem' }} /> <PhoneAndroid sx={{ mx: 0.5, fontSize: '1.2rem' }} />
        </Typography>
      </AdaptiveLayout>
      
      {/* Subscription plans grid with new PlanCard */}
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={1}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        {plansQuery.isLoading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
            <Loader />
          </Box>
        ) : plansQuery.isError ? (
          <Typography color="error" sx={{ textAlign: 'center', my: 3 }}>
            {t("planPage.errorLoadingData")}
          </Typography>
        ) : (
          <>
            <Grid container spacing={3}>
              {/* Monthly Plans using our new PlanCard component */}
              {monthlyPlans.slice(0, 3).map((plan, index) => (
                <Grid 
                  item 
                  xs={12} 
                  sm={12} 
                  md={4} 
                  key={`monthly-${index}`}
                >
                  <PlanCard 
                    plan={plan} 
                    isPopular={index === 1} // Make the middle card popular
                  />
                </Grid>
              ))}
            </Grid>
          </>
        )}
      </AdaptiveLayout>
      
      {/* Business-themed CTA */}
      <AdaptiveLayout
        backgroundColor="#40d47e"
        marginY={2}
        paddingY={4}
        paddingX={2}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <CtaTitle sx={{ color: 'white' }}>
          Elevate Your Real Estate Business Today
        </CtaTitle>
        <CtaDescription sx={{ color: 'white' }}>
          Get exclusive access to qualified FSBO leads and grow your client base with our premium subscription plans.
        </CtaDescription>
        <CtaButton sx={{ 
          backgroundColor: '#e2e8f0',
          color: 'white',
          '&:hover': {
            backgroundColor: '#cbd5e0',
          }
        }}>
          Start Your 14-Day Free Trial
        </CtaButton>
      </AdaptiveLayout>
      
      <AdaptiveLayout
        backgroundColor={null}
        marginY={0}
        paddingY={0}
        paddingX={0}
        centered={true}
        fullWidth={true}
        useInnerWrapper={true}
      >
        <SliderInfo 
          darkMode={darkMode}
          sliderWidth={120}
        />
      </AdaptiveLayout>
    </Box>
  );
};

export default HomePage;